'use strict';
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    ListView,
    RefreshControl,
} from 'react-native';
import Global from '../Commom/GlobalConst';
import HeadlineDetails from '../Pages/HeadlineDetails';
import RuralLibraryAPIService from "../Commom/RuralLibraryAPIService";
export default class HeadlineList extends Component {
    constructor(props) {
        super(props);
        var headlineData = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            headlineDataSource: headlineData,
        }
        ;
    }

    componentDidMount() {
        RuralLibraryAPIService.get_headline(this.props.ID).then((ret)=> {

            this.setState({
                headlineDataSource: this.state.headlineDataSource.cloneWithRows(ret),
            });
        }).catch((err)=> {

        });
    }

    BackAction() {
        this.props.navigator.pop();
    }

    HeadlineDetails(data) {
        this.props.navigator.push({
            name: 'HeadlineDetails',
            component: HeadlineDetails,
            passProps: {
                data: data
            }
        });
    }


    travelListRow(rowData) {
        return (
            <View style={{backgroundColor:'white'}}>
                <TouchableOpacity activeOpacity={0.5}
                                  onPress={()=>this.HeadlineDetails(rowData)}>
                    <Text
                        numberOfLines={1}
                        style={{fontSize:14,color:Global.FontColor.DimGray,paddingLeft:10,paddingRight:10,paddingTop:10}}>{'标题：' + rowData.title}</Text>
                    <Text
                        numberOfLines={1}
                        style={{fontSize:12,color:Global.FontColor.DarkGray,padding:10}}>{'   内容：' + rowData.content}</Text>
                </TouchableOpacity>
                <View
                    style={{marginTop:5,width:Global.Const.size.width,height:10,backgroundColor:Global.Const.transparent}}>
                </View>
            </View>
        );
    }


    render() {
        return (
            <View style={styles.container}>
                <View style={{width:Global.Const.size.width,height:65,backgroundColor:'white'}}>

                    <View style={{marginTop:24,alignItems:'center'}}>

                        <View style={{width:21,height:21,position:'absolute',left:12,top:3}}>
                            <TouchableOpacity activeOpacity={0.5}
                                              onPress={()=>this.BackAction()}>
                                <Image style={{resizeMode:'contain',width:21,height:21}}
                                       source={require('../../Image/icon_back.png')}></Image>
                            </TouchableOpacity>
                        </View>
                        <Text style={{fontSize:20,color:Global.FontColor.DimGray}}>头条列表</Text>
                    </View>
                </View>
                <ListView
                    style={{borderTopWidth:2,borderColor:Global.Const.transparent}}
                    enableEmptySections={true}
                    dataSource={this.state.headlineDataSource} renderRow={this.travelListRow.bind(this)}/>
            </View>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Global.Const.transparent,
    },
});